<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>途羊旅游网后台管理系统</title>
	<meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
       <link rel="stylesheet" href="css/colorpicker.css" />
       <link rel="stylesheet" href="css/datepicker.css" />
	<link rel="stylesheet" href="css/uniform.css" />
	<link rel="stylesheet" href="css/select2.css" />		
	<link rel="stylesheet" href="css/unicorn.main.css" />
	<link rel="stylesheet" href="css/unicorn.grey.css" class="skin-color" />
	
	<script src="${pageContext.request.contextPath}/back/js/jquery-3.5.1.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/jquery.ui.custom.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/jquery.min.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/bootstrap.min.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/bootstrap-colorpicker.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/bootstrap-datepicker.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/jquery.uniform.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/select2.min.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/unicorn.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/unicorn.form_common.js"></script>
	<script src="${pageContext.request.contextPath}/back/js/unicorn.tables.js"></script>
	<script src="${pageContext.request.contextPath}/back/js/jquery.dataTables.min.js"></script>	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<!-- header part -->
	<div id="header">
		<h1><a href="./dashboard.html">Unicorn Admin</a></h1>		
	</div>
	
	<!-- <div id="search">
		<input type="text" placeholder="Search here..." /><button type="submit" class="tip-right" title="Search"><i class="icon-search icon-white"></i></button>
	</div> -->
	<div id="user-nav" class="navbar navbar-inverse">
           <ul class="nav btn-group">
               <li class="btn btn-inverse">
					<a title="" href="#"><i class="icon icon-user"></i><span class="text">欢迎进入！管理员： ${sessionScope.admin.adminName}</span></a>
            	</li>
			
				<li class="btn btn-inverse">
					<a title="" href="login.jsp"><i class="icon icon-share-alt"></i> <span class="text">退出</span></a>
				</li>
           </ul>
       </div>
           
	<div id="sidebar">
		<a href="#" class="visible-phone"><i class="icon icon-home"></i>
			Dashboard</a>
		<ul>
			<li><a href="index.jsp"><i class="icon icon-th-list"></i>
					<span>首页</span> </a>
			</li>
			<li ><a href="userManage.jsp"><i class="icon icon-th-list"></i> <span>用户管理</span></a></li>
			
			<li class="submenu">
					<a href="#"><i class="icon icon-th-list"></i> <span>景点管理</span> <span class="label">2</span></a>
					<ul>
						<li><a href="insertScenic.jsp">新增景点</a></li>
						<li><a href="findAllScenic.jsp">维护景点信息</a></li>
						
					</ul>
				</li>
				
			<li class="submenu active open"><a href="#"><i class="icon icon-th-list"></i>
					<span>酒店管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="insert-hotel.jsp">
							<span>新增酒店</span></a></li>
					<li class="active"><a href="hotel-management.jsp">
							<span>维护酒店信息</span></a></li>
				</ul>
			</li>
			<li class="submenu">
				<a href="#"><i class="icon icon-th-list"></i> <span>客房管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="room-management.jsp">维护客房信息</a></li>
					<li><a href="insert-room.jsp">新增客房</a></li>
				</ul>
			</li>
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>评论管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="hotel-comment.jsp">
							<span>大众点评酒店</span></a></li>
					<li><a href="scenic-comment.jsp">
							<span>大众点评景点</span></a></li>
				</ul>
			</li>
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>订单管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="findAllHotelOrder.jsp">
							<span>酒店订单</span></a></li>
					<li><a href="findAllScenicOrder.jsp">
							<span>景点门票订单</span></a></li>
				</ul>
			</li>

		</ul>
	</div>
	
	<div id="style-switcher">
		<i class="icon-arrow-left icon-white"></i>
		<span>Style:</span>
		<a href="#grey" style="background-color: #555555;border-color: #aaaaaa;"></a>
		<a href="#blue" style="background-color: #2D2F57;"></a>
		<a href="#red" style="background-color: #673232;"></a>
	</div>
	
	<div id="content">
		<div id="content-header">
			<h1>酒店管理</h1>
			<!-- <div class="btn-group">
				<a class="btn btn-large tip-bottom" title="Manage Files"><i class="icon-file"></i></a>
				<a class="btn btn-large tip-bottom" title="Manage Users"><i class="icon-user"></i></a>
				<a class="btn btn-large tip-bottom" title="Manage Comments"><i class="icon-comment"></i><span class="label label-important">5</span></a>
				<a class="btn btn-large tip-bottom" title="Manage Orders"><i class="icon-shopping-cart"></i></a>
			</div> -->
		</div>
		
		<!-- 表格上方 层级 -->
		<div id="breadcrumb">
			<a href="#" class="tip-bottom"><i class="icon-home"></i>Home</a>
			<a href="#" class="current"> 酒店管理 </a>
			<a href="#" class="current"> 维护酒店信息</a>
		</div>
		
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="widget-box">
						<div class="widget-title">
							<h5>酒店列表</h5>
							<div style="float:left;margin:2px;">
								<label><b>酒店名称:</b><input id="hotelName" type="text" aria-controls="DataTables_Table_0"><button id="search-button" style="margin-left:10px;margin-top:-10px;">搜索</button>
									<button id="clear-search-button" style="margin-left:10px;margin-top:-10px;">清空</button>
								</label>
							</div>
							<div style="margin-up:5px;">
								<label style="float:right;">显示
								<select id="select-pageSize" size="1" name="DataTables_Table_0_length" aria-controls="DataTables_Table_0">
									<option value="10" selected="selected">10</option>
									<option value="20">20</option>
									<option value="30">30</option>
								</select>
								条数据
							</label>
							</div>
						</div>
						
						
						<div class="widget-content nopadding">
							<table class="table table-bordered">
								<thead>
									<tr>
										<th>酒店Id</th>
										<th>酒店名称</th>
										<th>酒店简介</th>
										<th>酒店图片</th>
										<th>联系电话</th>
										<th>酒店地址</th>
										<th>酒店星级</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="tbody-hotelList">
									
								</tbody>
							</table>  
						</div>
						
						
						<div class="widget-title">
							
						<div class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers" id="DataTables_Table_0_paginate">
							<a tabindex="0" class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled" id="DataTables_Table_0_first">首页</a>
							<a tabindex="0" class="previous fg-button ui-button ui-state-default ui-state-disabled" id="DataTables_Table_0_previous">上一页</a>
							<span>
								<a tabindex="0" class="fg-button ui-button ui-state-default ui-state-disabled">1</a>
								<a tabindex="0" class="fg-button ui-button ui-state-default">2</a>
								<a tabindex="0" class="fg-button ui-button ui-state-default">3</a>
								<a tabindex="0" class="fg-button ui-button ui-state-default">4</a>
								<a tabindex="0" class="fg-button ui-button ui-state-default">5</a>
							</span>
							<a tabindex="0" class="next fg-button ui-button ui-state-default" id="DataTables_Table_0_next">下一页</a>
							<a tabindex="0" class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default" id="DataTables_Table_0_last">尾页</a>
						</div>
						</div>
					</div>
				</div>
			</div>
			
		<div class="row-fluid">
			
		</div>

		<div class="row-fluid">
			<div id="footer" class="span12">
				2020 &copy; Travel Admin.
			</div>
		</div>
	</div>
	
<!-- 修改模态框（Modal） -->
<div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					酒店信息管理
				</h4>
			</div>
			<div class="modal-body">
			 <%-- action="${pageContext.request.contextPath}/HotelServlet" --%>
				<form action="${pageContext.request.contextPath}/HotelServlet" id="update-form" method="post" enctype="multipart/form-data" >
					<!-- 隐藏域 -->
					<input type="hidden" name="op" value="modify">
					
					<div class="form-group">
						<label for="firstname" class="col-sm-2 control-label">酒店Id</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="modal-hotelId" name="modal-hotelId" readonly="readonly">
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">酒店名称</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="modal-hotelName" name="modal-hotelName">
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">酒店简介</label>
						<div class="col-sm-10">
							<textarea rows="" cols="" id="modal-hotelDesc" name="modal-hotelDesc"></textarea>
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">酒店图片</label>
						<div class="col-sm-10">
							<img id="img-src" height='120px' width='200px' />
							<label for="modify-hotel-picture" class="btn btn-default">更换图片</label>
							<span style="display:none"><input id="modify-hotel-picture" name="modify-hotel-picture" type="file" accept="image/jpg,image/jpeg,image/png,image/gif"></span>
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">酒店联系电话</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="modal-hotelPhone" name="modal-hotelPhone">
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">酒店地址</label>
						<div class="col-sm-10">
							<textarea rows="" cols="" id="modal-hotelAddress" name="modal-hotelAddress"></textarea>
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">酒店星级</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="modal-hotelStar" name="modal-hotelStar">
						</div>
					</div>
					
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<!-- 使用普通按钮,做点击事件 -->
							<!-- <button type="button" class="btn btn-default" id="update-btn">修改</button> -->
							<input type="submit" name="" value="提交" id="update-btn">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<!-- <button type="button" class="btn btn-primary">
					提交更改
				</button> -->
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
            
<script type="text/javascript">
	
	 $(document).ready(function(){
	 	// 页面一进入，发起异步请求,文章列表
		sendAJAX(1);
	 	
		// 搜索事件
		$(document).on("click","#search-button",function(){
			// 调用发送请求方法,参数页码
			sendAJAX(1);		
		});
	 	
		// 首页
		$(document).on("click","#DataTables_Table_0_first",function(){
			 // 获取当前页码
			 var pageNum = $("#pageInfo").data("pagenum");	 
			 console.log(pageNum);
			 // 判断
			 if(pageNum == 1){
				 alert("已经是首页");		
			 }else{
				 // 调用发送请求方法,参数页码
				 sendAJAX(1);
			 }	
		});
		
		// 上一页
		$(document).on("click","#DataTables_Table_0_previous",function(){
			 // 获取当前页码
			 var pageNum = $("#pageInfo").data("pagenum") -1;
			 
			 if(pageNum < 1){
				 // 拦截请求
				 alert("已经是第一页");
			 }else{
				// 调用发送请求方法,参数页码
				 sendAJAX(pageNum);
			 }
	 	});
	 	
		 // 下一页
		 $(document).on("click","#DataTables_Table_0_next",function(){
			 // 获取当前页码
			 var pageNum = eval($("#pageInfo").data("pagenum") + 1);		 
			 // 获取最大页码
			 var pages = $("#pageInfo").data("pages");
			 
			 if(pageNum > pages){
				 // 拦截请求
				 alert("已经是最后一页");
			 }else{
				// 调用发送请求方法,参数页码
				 sendAJAX(pageNum);
			 }
	 	})
		
	 	 // 尾页
	 	 $(document).on("click","#DataTables_Table_0_last",function(){
			 // 获取当前页码
			 var pageNum = $("#pageInfo").data("pagenum");	 
			 // 获取最大页码
			 var pages = $("#pageInfo").data("pages");
		 
			 if(pageNum == pages){
				 // 拦截请求
				 alert("已经是尾页");
			 }
			 // 调用发送请求方法,参数页码
			 sendAJAX(pages);
		
		     });
		     
		    // 页码
		 $(document).on("click",".currents",function(){
			 // 获取当前显示的页码
			 var currentPageNum = $("#pageInfo").data("pagenum");	
			 // 获取当前超链接上表示的页码
			 var pageNum = $(this).text();
			 if(currentPageNum == pageNum){
				 return;
			 }
			// 调用发送请求方法,参数页码
			 sendAJAX(pageNum);		
	 	  });
		  
			// 下拉框改变事件
		 $(document).on("change","#select-pageSize",function(){
			// 调用发送请求方法,参数页码
			 sendAJAX(1);		
	 	  });
		
		// 清空输入框
		$("#clear-search-button").click(function(){
			$("#hotelName").val("");
			sendAJAX(1);	
		});
		
		// 删除事件
		 $(document).on("click",".delete",function(){
			 
			 if(!confirm("确定删除吗？")){
				 return;
			 }
			 
			 // 显示页面
			 var pageNum = $("#pageInfo").data("pagenum");	
			 // 获取显示记录数
			 var pageSize = $("#select-pageSize").val();
			 // 获取输入关键字
			 var keyword = $("#hotelName").val();	 
			 // 自定义属性
			 var hotelId = $(this).data("hotelid");    //  在当前a标签设置 data-articleid=\""+article.articleId+"\" 即可得到当前遍历的到的articleId
			 console.log(hotelId);
			 // 发送AJAX请求
			 $.ajax({
	    		 async:true,
	    		 type:"get",
	    		 url:"${pageContext.request.contextPath}/HotelServlet",
	    		 data:{
	    			 op:"delete",
	    			 pageNum:pageNum,
	    			 pageSize:pageSize,
	    			 keyword:keyword,
	    			 hotelId:hotelId
	    		 },
	    		 dataType:"json",
	    		 success:function(result){
	    			// 解决删除的当前页已经无数据的情况
	    			if(result.pageNum > result.pages){
	    				if(result.pages==0){
	    					// 删除光,无数据
	    					$("#tbody-hotelList").html("无相关数据");
				 			$("#DataTables_Table_0_paginate").html("");
	    					return;
	    				}
	    				// 切换到上一页,重新发送AJAX请求
	    				sendAJAX(result.pages);
	    			}else{
	    				// 直接调用渲染数据方法
	    				showData(result);
	    			}
	    		 },
	    		 error:function(){
	    			 alert("异步请求失败!");
	    		 }
	    	 });
		});
		 
		// 点击编辑,填充原始数据
		$(document).on("click",".modify",function(){
			var hotelId = $(this).data("hotelid");
			$.ajax({
				 async:true,
	    		 type:"get",
	    		 url:"${pageContext.request.contextPath}/HotelServlet",
	    		 data:{
	    			 op:"getHotelById",
	    			 hotelId:hotelId
	    		 },
	    		 dataType:"json",
	    		 success:function(result){
	    			// 将文章的原始数组渲染到指定位置上
	    			$("#modifyModal #modal-hotelId").val(result[0].hotelId);
	    			$("#modifyModal #modal-hotelName").val(result[0].hotelName);
	    			$("#modifyModal #modal-hotelDesc").val(result[0].hotelDesc);
	    			$("#modifyModal #modal-hotelPhone").val(result[0].hotelPhone);
	    			$("#modifyModal #modal-hotelAddress").val(result[0].hotelAddress);
	    			$("#modifyModal #modal-hotelStar").val(result[0].hotelStar);
	    			$("#modifyModal #img-src").prop("src","../HotelFileDownloadServlet?fileName=" + result[0].hotelPicture);  
	    			
	    		 },
	    		 error:function(){
	    			 alert("异步请求失败!");
	    		 }
			})
		});
		
		/* // 使用异步请求执行修改操作
		$("#update-btn").click(function(){
			 // 不带文件控件的表单,通过serialize()序列化方法获取表单数据
			 var formData = $("#update-form").serialize(); // name=value&name=value... 
			 var  formData = new FormData($("#update-form")[0]);
			 $.ajax({
	    		 async:true,
	    		 type:"post",
	    		 url:"${pageContext.request.contextPath}/HotelServlet",
	    		 data:formData, // 仅仅只能传递一个参数
	    		 success:function(result){
	    			// 关闭模态框
	    		    $("#modifyModal").removeClass("in");
	    		    $("#modifyModal").attr("aria-hidden",true); 
	    		    $("#modifyModal").css("display","none");
	    		    // 关闭生成的阴影背景
	    		    $(".modal-backdrop").remove();
	    			// 再一次发送查询请求
	    			var pageNum = $("#pageInfo").data("pagenum");	
	    			sendAJAX(pageNum);
	    		 },
	    		 error:function(){
	    			 alert("异步请求失败!");
	    		 }
	    	 });
		}); */
		
		
		// 图片选择做改变事件
		$("#modify-hotel-picture").change(function(){
			// 生成图片预览功能
			// 1.得到文件列表数组,获取数组中第一个文件
			var imgFile = this.files[0];

			// 判断是否有上传文件
			if(imgFile==null){	
				/* $("#preview-img").prop("src","#");	 */		
				console.log("未选中文件");
			}else{
				// 正则表达式验证选择的是否是图片类型
				var regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i;
				if (!regexImageFilter.test(imgFile.type)) {
					 alert("请选择有效图片");
					/*  $("#picture").val(""); */
				}else{ 
					// 2.构建文件读取流对象
					var fileReader =  new FileReader();
					// 3.利用流对象获取文件内容
					fileReader.readAsDataURL(imgFile);
					// 4.加载事件
					fileReader.onload = function(){
						// 5.渲染头像预览框
						$("#img-src").prop("src",this.result); // this.result从文件读取流对象中获取数据
					}
				 } 
			}
		});
		    
		    
	});		// document.ready()结束处
		 
	
		 	
	  // 发送AJAX请求 
	 function sendAJAX(pageNum){
	 	 // 获取显示记录数
		 var pageSize = $("#select-pageSize").val();
	 	 
		 // 获取输入关键字
		 var keyword = $("#hotelName").val();	 
	 	 $.ajax({
	 		 async:true,
	 		 type:"get",
	 		 url:"${pageContext.request.contextPath}/HotelServlet",
	 		 data:{
	 			 op:"searchByPage",
	 			 pageNum:pageNum,
	 			 pageSize:pageSize,
	 			 keyword:keyword
	 		 },
	 		 dataType:"json",
	 		 success:function(result){
	 			// 调用渲染函数
	 			 showData(result);
	 		 },
	 		 error:function(){
	 			 alert("异步请求失败!");
	 		 }
	 	 });
	}

		 // 渲染数据
       	function showData(result){
           	
       		 // 渲染表格数据
       		 var content = "";
       		 // 没有数据
       		 if(result.length == 0){
       			 $("#tbody-hotelList").html("无相关数据");
       		 }else{
       			 for(var i = 0; i < result.data.length; i++){
       				 
       				 var hotel = result.data[i];
       				 content += "<tr class=\"gradeA\">"+
       								"<td style=\" width:50px;  \">"+hotel.hotelId+"</td>"+
									"<td style=\" width:55px;  \">"+hotel.hotelName+"</td>"+
									"<td>"+hotel.hotelDesc+"</td>"+
									"<td width=\"66px\"><img src=\"../HotelFileDownloadServlet?fileName="+hotel.hotelPicture+"\"></td>"+
									"<td>"+hotel.hotelPhone+"</td>"+
									"<td style=\" width:55px;  \">"+hotel.hotelAddress+"</td>"+
									"<td style=\" width:55px;  \">"+hotel.hotelStar+"</td>"+
									"<td style=\" width:90px;  \" class=\"center\"><a href=\"#\" data-toggle=\"modal\" data-target=\"#modifyModal\" class=\"modify\" data-hotelid=\""+hotel.hotelId+"\">&nbsp;&nbsp;&nbsp;编辑</a><a href=\"#\" class=\"delete\" data-hotelid=\""+hotel.hotelId+"\">&nbsp;&nbsp;&nbsp;删除</a></td>"+
								"</tr>";
       			 }
       			 $("#tbody-hotelList").html(content);
       			 
       			 //渲染分页信息
       			 var pageInfo = "";
       			 pageInfo = "<span id=\"pageInfo\" data-pagenum=\""+result.pageNum+"\"  data-pages=\""+result.pages+"\">每页"+result.pageSize+"条 共"+result.total+"条  第"+result.pageNum+"/"+result.pages+"页</span>";
       			 if(result.pageNum == 1){
       				 pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_first\" disabled=\"disabled\">首页</a>";
       				 pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_previous\" disabled=\"disabled\" >上一页</a>";
       			 	
       			 }else{
       				 pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_first\" >首页</a>";
       				 pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_previous\"  >上一页</a>";
       			 }

       			 pageInfo += "<span>";
       			 
       			 for(var i = 1; i <= result.pages; i++){
       				 // 设置当前的页面激活样式
       				 if(result.pageNum == i){
       					 pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default ui-state-disabled currents\"  >"+i+"</a>";
       				 } else{
       					 pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default currents\" >"+i+"</a>";
       				 }
       			 }
       			 
       			pageInfo += "</span>";
       			 
       	 		if(result.pageNum == result.pages){
       	 			 pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_next\" disabled=\"disabled\">下一页</a>";
       	 			 pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_last\" disabled=\"disabled\">尾页</a>";
       			}else{
       				 pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_next\">下一页</a>";
       				 pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_last\">尾页</a>";
       			}
       			 $("#DataTables_Table_0_paginate").html(pageInfo);
       		 }
        }
</script>
</body>
</html>
